<template>
    <div class="withdraw_wrap">
        <view class="withdraw_list">
            <view class="search" v-if="!UserId">
                <u-icon name="search" size="22" color="#297AFD"></u-icon>
                <input type="text" v-model="search" placeholder="请输入" @change="handleChange">
            </view>
            <u-empty mode="list" v-if="!list.length"></u-empty>
            <view v-for="item in list" class="item_amount">
                <view class="top">
                    <view class="top_text">{{ item.TiChengType == 0 ? '单量' : '续费' }}提成（元）</view>
                    <view class="top_amount">{{ item.TiChengAmount }}</view>
                </view>
                <view class="item_detail">
                    <view class="det_text">
                        <view class="det_left">下单时间：</view>
                        <view class="det_right">{{ $timestampToDate(item.CreateTime, 'time') }}</view>
                    </view>
                    <view class="det_text" v-if="item.TiChengType == 0">
                        <view class="det_left">下单来源：</view>
                        <view class="det_right">{{ item.TiChengSource }}</view>
                    </view>
                    <view class="det_text">
                        <view class="det_left">代理ID：</view>
                        <view class="det_right">{{ item.ProxyUserNumber }}</view>
                    </view>
                    <view class="det-flex">
                        <view class="det_text">
                            <view class="det_left">用户ID：</view>
                            <view class="det_right">{{ item.UserNumber }}</view>
                        </view>
                        <view class="del">
                            <span v-if="item.IsDelete">已提现</span>
                            <span @click="handleDel(item.Id)"
                                v-else-if="userInfo.UserType == 3 && item.TiChengType == 1">删除</span>
                            <span v-else>未提现</span>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </div>
</template>
<script>
export default {
    data () {
        return {
            search: "",
            UserId: "",
            form: {
                pageIndex: 1,
                pageSize: 10
            },
            list: []
        }
    },
    computed: {
        userInfo () {
            return this.$store.state.userInfo
        }
    },
    methods: {
        //删除记录
        handleDel (tichengId) {
            uni.showModal({
                title: '提示',
                content: '确定删除？',
                success: async (res) => {
                    if (res.confirm) {
                        const res = await this.$http.delete(`ticheng/renewalticheng/${tichengId}`)
                        if (res.Code == 200) {
                            uni.showToast({ title: "删除成功" })
                            this.form.pageIndex = 1
                            this.list = []
                            this.getList()
                        } else {
                            uni.showToast({ title: res.Msg, icon: "none" })
                        }
                    } else if (res.cancel) {
                        console.log('取消');
                    }
                }
            });
        },
        //获取列表
        async getList () {
            uni.showLoading({ title: "加载中" })
            let res = null;
            const obj = JSON.parse(JSON.stringify(this.form))
            if (this.search) {
                obj.proxyUserNumber = this.search
            }
            //年费代理
            if (this.userInfo.UserType == 1) {
                if (this.UserId) {//单个代理提成记录
                    res = await this.$http.get(`ticheng/contributetichengrecords/${this.UserId}`, obj)
                } else {//查询当前用户代理的提成记录
                    res = await this.$http.get(`ticheng/tichengrecords`, obj)
                }
            } else {
                //管理员
                res = await this.$http.get('ticheng/admintichengrecords', obj)
            }
            if (res.Code == 200) {
                this.list = this.list.concat(res.Data.DataList)
            } else {
                uni.showToast({ title: res.Msg })
            }
            uni.hideLoading()
        },
        //搜索
        handleChange () {
            this.form.pageIndex = 1
            this.list = []
            this.getList()
        }
    },
    onReachBottom () {
        this.form.pageIndex += 1
        this.getList()
    },
    onLoad (e) {
        if (e.UserId) {
            this.UserId = e.UserId
        }
        if (e.type) {
            this.form.tiChengType = e.type
        }
        if (e.id) {
            this.form.proxyUserNumber = e.id
        }
        if (e.type == 0) {
            uni.setNavigationBarTitle({
                title: '单量提成'
            });
        } else if (e.type == 1) {
            uni.setNavigationBarTitle({
                title: '续费提成'
            });
        } else {
            uni.setNavigationBarTitle({
                title: '提成记录'
            });
        }
        this.getList()
    }
}
</script>
<style lang="scss" scoped>
.withdraw_list {
    width: 100%;
    height: 100vh;
    padding: 26rpx 28rpx;
    box-sizing: border-box;
    background: linear-gradient(360deg, #F6F8FC 0%, #F6F8FC 12%, #F2F2F2 100%);
}

.item_amount {
    width: 100%;
    /* background: url("../../static/img/amount_bg.png"); */
    margin-bottom: 32rpx;
    background-color: #FFFFFF;
    box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.05);
    border-radius: 12rpx;

    .top {
        width: 100%;
        height: 88rpx;
        background: linear-gradient(87deg, #E1F1FF 0%, rgba(198, 215, 255, 0.21) 100%);
        border-radius: 12rpx 12rpx 0rpx 0rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 26rpx 40rpx;
        box-sizing: border-box;

        .top_text {
            font-weight: bold;
            font-size: 26rpx;
            color: #000000;
        }

        .top_amount {
            font-weight: 500;
            font-size: 40rpx;
            color: #0051FF;
        }
    }

    .item_detail {
        padding: 32rpx 40rpx;

        .det-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .del {
                font-size: 24rpx;
                color: #0051FF;
            }
        }

        .det_text {
            display: flex;
            padding-bottom: 30rpx;

            &:last-child {
                padding-bottom: 0;
            }

            .det_left {
                width: 120rpx;
                font-weight: bold;
                font-size: 24rpx;
                color: #83889F;
                padding-right: 20rpx;
            }

            .det_right {
                font-weight: bold;
                font-size: 24rpx;
                color: #000000;
            }
        }
    }
}

.search {
    width: 694rpx;
    height: 36px;
    background: #FFFFFF;
    box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    margin: auto;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    box-sizing: border-box;
}

.search image {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-right: 4px;
}

.search input {
    width: 100%;
    font-weight: bold;
    font-size: 24rpx;
    color: #000000;
}

.search input::placeholder {
    color: #919191;
}
</style>